<template>
  <div class="report-list">
    <!-- 筛选条件部分 -->
    <el-card class="filter-card">
      <!-- 筛选条件表单 -->
      <template #header>
        <div class="clearfix">
          <span>筛选条件</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="resetFilter"
          >
            重置
          </el-button>
        </div>
      </template>
      <el-form :inline="true" :model="filterForm" class="demo-form-inline">
        <!-- 举报类型选择 -->
        <el-form-item label="举报类型">
          <el-select v-model="filterForm.type" placeholder="请选择举报类型">
            <el-option
              v-for="item in reportTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- 处理状态选择 -->
        <el-form-item label="处理状态">
          <el-select v-model="filterForm.status" placeholder="请选择处理状态">
            <el-option
              v-for="item in handleStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- 时间范围选择 -->
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleFilter">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 举报列表部分 -->
    <el-card class="list-card">
      <template #header>
        <div class="clearfix">
          <span>举报列表</span>
          <div class="batch-actions" v-if="selectedRowKeys.length > 0">
            <el-button
              type="danger"
              size="small"
              @click="handleBatchDelete(selectedRowKeys)"
            >
              批量删除
            </el-button>
          </div>
        </div>
      </template>
      <el-table
        :data="paginatedReportList"
        stripe
        style="width: 100%"
        :loading="loading"
        row-key="reportId"
        @selection-change="handleSelectionChange"
      >
        <!-- 选择列 -->
        <el-table-column type="selection" width="55" />
        <!-- 举报 ID 列 -->
        <el-table-column prop="reportId" label="ID" min-width="120" />
        <!-- 新增：举报类型列 -->
        <el-table-column label="举报类型" min-width="150">
          <template #default="scope">
            <el-tag :type="getTargetTypeTagType(scope.row.targetType)">{{
              formatTargetType(scope.row.targetType)
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 举报类型列 -->
        <el-table-column prop="reason" label="举报原因" min-width="200">
          <template #default="scope">
            <el-tag :type="getTypeTagType(scope.row.reason)">{{
              scope.row.reason
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 举报时间列 - 修改为只显示年月日 -->
        <el-table-column prop="createTime" label="举报时间" min-width="180">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <!-- 处理状态列 -->
        <el-table-column prop="status" label="处理状态" min-width="160">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">{{
              getStatusName(scope.row.status)
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" min-width="180" header-align="center">
          <template #default="scope">
            <!-- 添加包裹按钮的容器 -->
            <div class="action-buttons">
              <el-button size="mini" @click="handleView(scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="primary"
                v-if="scope.row.status === 'pending'"
                @click="handleHandle(scope.row)"
              >
                处理
              </el-button>
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.status !== 'pending'"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </el-card>

    <!-- 显示详细信息的 Dialog -->
    <el-dialog
      v-model="dialogVisible"
      :title="reportDetail.mode === 'handle' ? '处理举报' : '举报详细信息'"
      center
      width="60%"
      class="custom-dialog"
    >
      <div class="dialog-content">
        <div class="form-container">
          <el-form :model="reportDetail">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="举报 ID">
                  <span class="detail">{{ reportDetail.reportId }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="举报时间">
                  <span class="detail">{{
                    formatDate(reportDetail.createTime)
                  }}</span>
                </el-form-item>
              </el-col>

              <!-- 新增举报类型字段 -->
              <el-col :span="12">
                <el-form-item label="举报类型">
                  <el-tag
                    :type="getTargetTypeTagType(reportDetail.targetType)"
                    >{{ formatTargetType(reportDetail.targetType) }}</el-tag
                  >
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理状态">
                  <el-tag :type="getStatusTagType(reportDetail.status)">
                    {{ getStatusName(reportDetail.status) }}
                  </el-tag>
                </el-form-item>
              </el-col>

              <!-- 举报人字段 - 只在用户举报时显示 -->
              <el-col :span="12" v-if="reportDetail.targetType === 'user'">
                <el-form-item label="举报人">
                  <span class="detail">{{ reportDetail.reporterName }}</span>
                </el-form-item>
              </el-col>

              <!-- 被举报对象字段 - 只在用户举报时显示 -->
              <el-col :span="12" v-if="reportDetail.targetType === 'user'">
                <el-form-item label="被举报对象">
                  <span class="detail">{{
                    reportDetail.reportedObjectName
                  }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="举报原因">
                  <el-tag :type="getTypeTagType(reportDetail.reason)">
                    {{ reportDetail.reason }}
                  </el-tag>
                </el-form-item>
              </el-col>

              <!-- 根据 targetType 显示不同内容 -->
              <el-col :span="24" v-if="reportDetail.targetType === 'content'">
                <el-form-item label="内容标题">
                  <span class="detail">{{ reportDetail.newsTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="reportDetail.targetType !== 'user'">
                <el-form-item label="举报内容">
                  <!-- 当举报类型为评论时，直接显示评论内容 -->
                  <template v-if="reportDetail.targetType === 'comment'">
                    <span class="detail">{{
                      reportDetail.reportedContent
                    }}</span>
                  </template>
                  <template v-else>
                    <span class="detail">{{
                      reportDetail.reportedContent
                    }}</span>
                  </template>
                </el-form-item>
              </el-col>

              <!-- 显示处理结果 -->
              <el-col :span="24" v-if="reportDetail.status === 'resolved'">
                <el-form-item label="处理结果">
                  <span class="detail">{{ reportDetail.resolution }}</span>
                </el-form-item>
              </el-col>

              <!-- 处理模式下显示处理结果输入框 -->
              <el-col :span="24" v-if="reportDetail.mode === 'handle'">
                <el-form-item label="处理结果">
                  <el-input
                    v-model="reportDetail.resolution"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入处理结果"
                  />
                </el-form-item>
              </el-col>
              <!-- 新增跳转按钮位置 -->
              <el-col :span="24" v-if="reportDetail.targetType === 'content'">
                <el-form-item label="">
                  <div class="detail-actions">
                    <div class="button-container">
                      <el-button
                        type="primary"
                        @click="goToDetail"
                        class="view-button"
                      >
                        <i class="el-icon-view"></i> 查看详情
                      </el-button>
                      <span class="action-tip">
                        查看被举报的内容
                        <!-- 修改为固定提示 -->
                      </span>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false"> 关闭 </el-button>
          <el-button
            type="info"
            @click="handleCancel"
            v-if="reportDetail.mode === 'handle'"
          >
            撤销处理
          </el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
            v-if="reportDetail.mode === 'handle'"
          >
            提交处理结果
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import useReportLogic from "@/utils/reportUtils.js";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// 新增日期格式化函数
const formatDate = (dateString) => {
  if (!dateString) return "";
  // 截取年月日部分 (格式: YYYY-MM-DD)
  return dateString.substring(0, 10);
};
// 新增举报类型格式化函数
const formatTargetType = (type) => {
  const typeMap = {
    user: "用户",
    content: "内容",
    comment: "评论",
  };
  return typeMap[type] || type;
};

const getTargetTypeTagType = (targetType) => {
  switch (targetType) {
    case "user":
      return "danger"; // 红色
    case "content":
      return "warning"; // 黄色
    case "comment":
      return "primary"; // 蓝色
    default:
      return "";
  }
};

const goToDetail = () => {
  // 保存当前报告详情
  const currentReport = { ...reportDetail.value };

  // 获取用户端的基础URL（根据实际配置）
  const userBaseUrl = "http://localhost:5180"; // 用户端运行端口

  // 关闭对话框
  dialogVisible.value = false;

  // 使用保存的副本
  switch (currentReport.targetType) {
    case "content":
      window.open(`${userBaseUrl}/news/${currentReport.targetId}`, "_blank");
      break;

    case "comment":
      const newsId = getNewsIdByComment(currentReport.targetId);
      window.open(
        `${userBaseUrl}/news/${newsId}?commentId=${currentReport.targetId}`,
        "_blank"
      );
      break;

    case "user":
      window.open(
        `${userBaseUrl}/personalCenter/${currentReport.targetId}`,
        "_blank"
      );
      break;

    default:
      ElMessage.warning("暂不支持该类型的跳转");
  }
};

const {
  loading,
  reportList,
  paginatedReportList,
  filterForm,
  reportTypes,
  handleStatus,
  selectedRowKeys,
  currentPage,
  pageSize,
  total,
  dialogVisible,
  reportDetail,
  getTypeTagType,
  getStatusName,
  getStatusTagType,
  handleSelectionChange,
  handleView,
  handleSubmit,
  handleCancel,
  handleHandle,
  handleDelete,
  handleBatchDelete,
  handleFilter,
  resetFilter,
  handleCurrentChange,
  handleSizeChange,
} = useReportLogic();
</script>

<style scoped>
/* 新增响应式样式 */
.report-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.filter-card {
  margin-bottom: 20px;
}

.list-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

.list-card :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.filter-card,
.list-card {
  width: 100%;
  box-sizing: border-box;
}

/* 确保表格容器可以滚动 */
.el-table {
  flex: 1;
  overflow: auto;
}

.pagination-container {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.batch-actions {
  float: right;
}

.action-buttons {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  gap: 8px; /* 按钮间距 */
  width: 100%;
  flex-wrap: wrap; /* 允许在小屏幕上换行 */
}

/* 对话框整体样式 */
.custom-dialog {
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* 对话框内容样式 */
.dialog-content {
  padding: 24px;
}

/* 表单容器样式 */
.form-container {
  border-radius: 8px;
  background-color: #f8f9fa;
  padding: 20px;
  margin-bottom: 16px;
}

/* 表单项样式 */
:deep(.el-form-item) {
  margin-bottom: 16px;
}

/* 输入框样式 */
:deep(.el-textarea) {
  width: 100%;
}

/* 调整下拉框宽度 */
:deep(.el-select) {
  width: 200px; /* 根据需要修改宽度 */
}

/* 调整下拉框高度 */
:deep(.el-select .el-input__wrapper) {
  height: 40px; /* 根据需要修改高度 */
  line-height: 40px; /* 使文字垂直居中 */
}

/* 详情内容样式 */
.detail {
  font-weight: 500;
  color: #333;
}

/* 对话框底部样式 */
.dialog-footer {
  text-align: center;
  padding: 16px 0 24px;
}

/* 自定义按钮样式 */
.dialog-footer .el-button {
  background-color: #4a8cff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(74, 140, 255, 0.2);
  transition: all 0.3s ease;
}

.dialog-footer .el-button:hover {
  background-color: #3a7bd5;
  box-shadow: 0 6px 16px rgba(74, 140, 255, 0.3);
  transform: translateY(-2px);
}

/* 调整对话框垂直居中 */
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 auto !important;
  top: 50%;
  transform: translateY(-50%);
  max-height: calc(100% - 30px);
  overflow-y: auto;
}
/* 媒体查询确保在小屏幕上也能正常显示 */
@media (max-width: 1200px) {
  .el-form--inline .el-form-item {
    margin-right: 10px;
  }

  .el-table__cell {
    padding: 8px 0;
  }
}

@media (max-width: 768px) {
  .el-dialog {
    width: 90% !important;
  }

  .el-col {
    width: 100%;
  }

  .el-form--inline {
    display: flex;
    flex-wrap: wrap;
  }
}
/* 在已有样式中添加 */
.detail-actions {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
}

.button-container {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 子元素水平居中 */
  gap: 8px; /* 按钮和文字间距 */
}

.view-button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #4a8cff, #3a7bd5);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(74, 140, 255, 0.3);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center; /* 按钮内容水平居中 */
  align-items: center; /* 按钮内容垂直居中 */
}

.view-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(74, 140, 255, 0.4);
}

.action-tip {
  font-size: 13px;
  color: #777;
  font-style: italic;
  text-align: center; /* 文字居中 */
}

/* 确保按钮图标和文字对齐 */
.view-button i {
  margin-right: 8px;
}
</style>
